import {CaptchaText, Text, TouchableOpacity, View} from 'M/UI/Libraries';
import {Alert} from 'react-native';
import React from 'react';
import StyleSheet from 'react-native/Libraries/StyleSheet/StyleSheet';
import {captchaService} from 'WE/Services';
import {SwipeListView} from 'react-native-swipe-list-view';

export default class CaptchaList extends React.Component {
  onPressHandler = ({item}) => {
    Alert.alert('删除将无法恢复', '确定删除吗?', [
      {
        text: '是',
        onPress: () => {
          captchaService.removeElement({value: item});
        },
      },
      {text: '否'},
    ]);
  };

  setItems() {
    const _this = this;
    captchaService.getList().then(items => {
      _this.setState({items: items.map(item => ({item, key: item}))});
    });
  }

  constructor(props) {
    super(props);
    this.state = {
      items: [],
    };
    const _this = this;
    captchaService.addListener(() => _this.setItems());
  }

  componentDidMount() {
    this.setItems();
  }

  render() {
    const {items} = this.state;
    return (
      <View style={styles.container}>
        <SwipeListView
          data={items}
          renderItem={({item: {item}}) => (
            <View>
              <CaptchaText item={item} />
            </View>
          )}
          renderHiddenItem={(data, rowMap) => (
            <View style={styles.rowBack}>
              <View />
              <View>
                <TouchableOpacity
                  style={styles.touchable}
                  onPress={() => this.onPressHandler(data.item)}>
                  <Text style={styles.delText}>删除</Text>
                </TouchableOpacity>
              </View>
            </View>
          )}
          rightOpenValue={-75}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingLeft: 2,
    paddingRight: 2,
  },
  linkContainer: {
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 8,
  },
  rowBack: {
    flex: 1,
    paddingHorizontal: 2,
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  delText: {
    fontSize: 18,
    letterSpacing: 3,
    color: '#6b6b6b',
  },
  link: {
    flex: 2,
    fontSize: 18,
    fontWeight: '400',
  },
  description: {
    flex: 3,
    paddingVertical: 8,
    fontWeight: '400',
    fontSize: 18,
  },
  touchable: {
    flex: 1,
    padding: 20,
    marginTop: 5,
    marginBottom: 5,
  },
});
